﻿(function($) {
    var methods = {
        init: function(options) {
            return this.each(function() {
                var data = $(this).data('splitter');
                if (!data) {
                    var defaults = {
                        panel1: { target: $("<div id='leftpanel'></div>").appendTo($(this)), cssClass: 'panel1', minWidth: 0 },
                        panel2: { target: $("<div id='rightpanel'></div>").appendTo($(this)), cssClass: 'panel2', minWidth: 0 },
                        panel1InitWidth: null,
                        splitterCssClass: null,
                        fixedPanel: null, //'p1' or 'p2' fixed panel when the container($(this) size changed;
                        orientation: 'h',    //h or v
                        enableSplitterDblClick: true,
                        onsplitted: null
                    }
                    var container = $(this);
                    var opts = $.extend(true, {}, defaults, options);

                    var lp = opts.panel1.target;
                    var rp = opts.panel2.target;

                    lp.detach();
                    rp.detach();
                    container.empty();
                    var lpc = $("<div style='position:relative;overflow:hidden;'></div>");
                    lp.appendTo(lpc);
                    container.append(lpc);
                    container.append(rp);
                    var spt = $("<div style='position:absolute;'></div>").appendTo(lpc);

                    var panel1InitWidth;
                    if (opts.orientation == 'v') {
                        spt.append("<div style='width:0px;height:50px;position:absolute;left:0;margin:0pt;padding:0pt;border:none;'></div>"); //for forbidden drag the splitter
                        spt.css('bottom', '0pt');
                        spt.css('min-height', '1px');
                        spt.css('cursor', 'n-resize');
                        spt.width('100%');

                        lpc.width('100%');

                        panel1InitWidth = (opts.panel1InitWidth ? opts.panel1InitWidth : (container.height() * 0.3));
                    } else {
                        spt.append("<div style='height:0px;width:50px;position:absolute;top:0;margin:0pt;padding:0pt;border:none;'></div>"); //for forbidden drag the splitter
                        spt.css('right', '0pt');
                        spt.css('min-width', '1px');
                        spt.css('cursor', 'e-resize');
                        spt.css('vertical-align', 'middle');
                        spt.css('margin-bottom', '-10000px');
                        spt.css('padding-bottom', '10000px');

                        lpc.css('float', 'left');
                        lpc.height('100%');

                        lp.css('float', 'left');
                        lp.height('100%');

                        rp.css('float', 'left');

                        panel1InitWidth = (opts.panel1InitWidth ? opts.panel1InitWidth : (container.width() * 0.3));
                    }


                    lp.addClass(opts.panel1.cssClass);
                    spt.addClass(opts.splitterCssClass);
                    rp.addClass(opts.panel2.cssClass);

                    if (opts.onsplitted && typeof (opts.onsplitted) == "function") {
                        container.bind('onsplitted', opts.onsplitted);
                    }

                    $(window).bind('resize', function() {
                        var fixedPanel = opts.fixedPanel;
                        var v = 0;
                        if (opts.orientation == 'v') {
                            if (fixedPanel == 'p1') {
                                v = lp.height();
                            } else if (fixedPanel == 'p2') {
                                v = ((container.height() > (rp.height() + spt.height())) ? (container.height() - rp.height() - spt.height()) : 0);
                            } else {
                                var total = lp.height() + rp.height();
                                var rate = (container.height() - spt.height()) / total;
                                if (rate < 0) rate = 0;
                                v = lp.height() * rate;
                            }
                        } else {
                            if (fixedPanel == 'p1') {
                                v = lp.width();
                            } else if (fixedPanel == 'p2') {
                                v = ((container.width() > (rp.width() + spt.width())) ? (container.width() - rp.width() - spt.width()) : 0);
                            } else {
                                var total = lp.width() + rp.width();
                                var rate = (container.width() - spt.width()) / total;
                                if (rate < 0) rate = 0;
                                v = lp.width() * rate;
                            }
                        }
                        if (v < opts.panel1.minWidth) v = opts.panel1.minWidth
                        container.splittercontainer('split', v);
                    });

                    if (opts.enableSplitterDblClick) {
                        spt.dblclick(function() {
                            var v;
                            if (spt.attr('restorevalue')) {
                                v = spt.attr('restorevalue');
                                spt.removeAttr('restorevalue');
                            } else {
                                v = 0;
                                if (opts.orientation == 'v') {
                                    spt.attr('restorevalue', lp.height());
                                } else {
                                    spt.attr('restorevalue', lp.width());
                                }
                            }
                            container.splittercontainer('split', v);
                        });
                    }

                    function Resize(e) {
                        e = e || window.event;
                        if (opts.orientation == 'v') {
                            var y = e.clientY;
                            var h = y < (lpc.offset().top + opts.panel1.minWidth + spt.height()) ? (opts.panel1.minWidth) : (y > (lpc.offset().top + container.height() - opts.panel2.minWidth - spt.height()) ? (container.height() - opts.panel2.minWidth - spt.height()) : (y - lpc.offset().top));
                            container.splittercontainer('split', h);
                        } else {
                            var x = e.clientX;
                            var w = x < (lpc.offset().left + opts.panel1.minWidth + spt.width()) ? (opts.panel1.minWidth) : (x > (container.offset().left + container.width() - opts.panel2.minWidth - spt.width()) ? (container.width() - opts.panel2.minWidth - spt.width()) : (x - lpc.offset().left));

                            container.splittercontainer('split', w);
                        }
                    }

                    function Stop() {
                        $(document).unbind('mousemove', Resize);
                        $(document).unbind('mousemove', Stop);
                        if (spt[0].setCapture) {
                            spt[0].releaseCapture();
                        } else if (window.captureEvents) {
                            window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                        }
                    }

                    spt.bind('mousedown', function() {
                        $(document).bind('mousemove', Resize);
                        $(document).bind('mouseup', Stop);
                        if (spt[0].setCapture) {
                            spt[0].setCapture();
                        } else if (window.captureEvents) {
                            window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                        }

                    });


                    $(this).data('splitter', {
                        target: $(this),
                        spt: spt,
                        p1c: lpc,
                        p1: lp,
                        p2: rp,
                        orientation: opts.orientation
                    });

                    container.splittercontainer('split', panel1InitWidth); //移动到初始位置
                }
            });
        },
        split: function(panel1Width) {
            return this.each(function() {
                var data = $(this).data('splitter');
                if (data) {
                    var v = parseInt(panel1Width);
                    if (v < 0) v = 0;

                    var container = data.target;
                    var lpc = data.p1c;
                    var lp = data.p1;
                    var spt = data.spt;
                    var rp = data.p2;

                    if (data.orientation == 'v') {
                        if (v > (container.height() - spt.height())) {
                            v = container.height() - spt.height();
                        }
                        lpc.height(v + spt.height() + 'px');
                        lp.height(v + 'px');
                        rp.height(container.height() - lpc.height() + 'px');
                    } else {
                        if (v > (container.width() - spt.width())) {
                            v = container.width() - spt.width();
                        }
                        lpc.width(v + spt.width() + 'px');
                        lp.width(v + 'px');
                        rp.width(container.width() - lpc.width() - 1 + 'px');
                    }
                    $(this).trigger('onsplitted');
                }
            });
        },
        collapse: function(p) {
            return this.each(function() {
                var data = $(this).data('splitter');
                if (data) {
                    var container = data.target;
                    var lpc = data.p1c;
                    var lp = data.p1;
                    var spt = data.spt;
                    var rp = data.p2;

                    if (p != 'p1' && p != '2') {
                        container.removeAttr('collapsed');
                        var v = Number(spt.attr('restorevalue'));
                        if (v > 0) {
                            if (data.orientation == 'v') {
                                lp.height(v + 'px');
                                lpc.height(lp.height() + spt.height() + 'px');
                                rp.height(container.height() - lpc.height() + 'px');
                            } else {
                                lp.width(v + 'px');
                                lpc.width(lp.width() + spt.width() + 'px');
                                rp.width(container.width() - lpc.width() - 1 + 'px');
                            }
                        }
                    }
                    else {
                        if (container.attr('collapsed')) return;
                        container.attr('collapsed', p);
                        if (data.orientation == 'v') {
                            spt.attr('restorevalue', lp.height());
                            if (p == 'p1') {
                                lpc.height('0px');
                            } else {
                                lpc.height(container.height() + 'px');
                            }
                            rp.height(container.height() - lpc.height() + 'px');
                        } else {
                            spt.attr('restorevalue', lp.width());
                            if (p == 'p1') {
                                lpc.width('0px');
                            } else {
                                lpc.width(container.width() + 'px');
                            }
                            rp.width(container.width() - lpc.width() - 1 + 'px');
                        }
                    }
                    $(this).trigger('onsplited');
                }
            });
        },
        getcollapsedpanel: function() {
            var p = $(this).attr('collapsed');
            if (p == 'p1' || p == 'p2') {
                return p;
            }
            return null;
        }
    };

    $.fn.splittercontainer = function(method) {

        // Method calling logic
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.splittercontainer');
        }

    };
})(jQuery);